
<template>
  <scroller>
    <div class="deliver">
      <section>
        <!-- 收货信息 -->
        <div class="con">
          <div class="con-c">
            <div class="title">
              <p>{{taskInfo['actApply.applyNumber']}}</p>
              <span>{{taskInfo['actApply.actNode']}}</span>
            </div>
            <div class="detail">
              <p style="color: #4A82C6;">申请明细</p>
              <p class="detail-l hui">申请单位名称</p>
              <span class="detail-r"> {{data.applyUnit && data.applyUnit.name}}</span>
              <p class="detail-l hui">申请单位部门</p>
              <span class="detail-r">{{data.applyUnitOffice && data.applyUnitOffice.name}}</span>
              <p class="detail-l hui">联系人姓名</p>
              <span class="detail-r"> {{data.linkName}}</span>
              <p class="detail-l hui">联系人电话 </p>
              <span class="detail-r"> {{data.linkPhone}}</span>
              <p class="detail-l hui">工程项目</p>
              <span class="detail-r"> {{data.warehouse && data.warehouse.name}}</span>
              <p class="detail-l hui">项目地址 </p>
              <span class="detail-r"> {{data.warehouseAddr}}</span>
              <p class="detail-l hui">要求到货时间</p>
              <span class="detail-r">{{data.arriveTime | format('YYYY-MM-DD')}}</span>
              <p class="detail-l hui">备注 </p>
              <span class="detail-r">{{data.remarks}}</span>
            </div>
          </div>
        </div>
        <!-- 设备信息 -->
        <div class="info" v-for="item in data.pyActDeliveryLogList" :key="item.id">
          <div class="info-c">
            <p style="border-bottom: 1px dashed #d4d4d4;">设备信息</p>
            <div class="info-l">
              <div class="info-p">
                <p class="hui">设备类型：</p>
                <span class="hei">{{item.apiDeviceType}}</span>
              </div>
              <div class="info-p">
                <p class="hui">主机型号：</p>
                <span class="lan">{{item.manufacturerModel.manufacturerModel}}</span>
              </div>
              <div class="info-p">
                <p class="hui">设备单位：</p>
                <span class="hei">{{item.apiDeviceUnit}}</span>
              </div>
            </div>
            <div class="info-r">
              <div class="info-p">
                <p class="hui">设备名称：</p>
                <span class="lan">{{item.apiDeviceName}}</span>
              </div>
              <div class="info-p">
                <p class="hui">物料号：</p>
                <span class="lan">{{item.deviceModel.deviceModel}}</span>
              </div>
              <div class="info-p">
                <p class="hui">申请数量：</p>
                <span class="lan">{{item.applyCount}}</span>
              </div>
            </div>
            <p style="display: inline-block;" class="hui">备注：</p>
            <span class="hei">{{item.remarks}}</span>
          </div>
        </div>
      </section>
    </div>
  </scroller>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loadmore } from 'mint-ui'
export default {
  name: 'ActApplyApply',
  components: {
    Loadmore
  },
  computed: {
    ...mapGetters({
      taskInfo: 'task/info'
    })
  },
  props: {
    data: {
      type: Object,
      default: () => ({
        applyUnit: {},
        applyUnitOffice: {},
        linkName: null,
        linkPhone: null,
        warehouse: {},
        warehouseAddr: null,
        arriveTime: null,
        remarks: null
      })
    }
  },
  data () {
    return {}
  },
  methods: {
    go () {
      var $router = this.$router
      $router.push('trueall')
    },
    loadTop1 () {
      //  加载更多数据
      this.$refs.loadmore1.onTopLoaded()
    }
  }
}
</script>

<style scoped>
.deliver {
  height: 100%;
  background: #eaeeef;
  margin-bottom: 4rem;
}
.con {
  width: 92%;
  margin-left: 4%;
  min-height: 18rem;
  background: #fff;
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
}
.con-c {
  padding: 0.5rem;
}
.title {
  height: 2rem;
  font-size: 0.8rem;
  border-bottom: 1px dashed #d4d4d4;
}
.title p {
  line-height: 2rem;
  float: left;
}
.title span {
  line-height: 2rem;
  float: right;
  color: #f5af41;
}
.detail {
  font-size: 0.8rem;
  line-height: 1.8rem;
}
.detail-l {
  display: inline-block;
  width: 40%;
  float: left;
}
.detail-r {
  display: inline-block;
  width: 60%;
  float: left;
}
.info {
  width: 92%;
  margin-left: 4%;
  min-height: 9rem;
  background: #fff;
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
}
.info-c {
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5rem;
}
.info-l {
  width: 50%;
  float: left;
}
.info-r {
  width: 50%;
  float: left;
}
.info-l p {
  display: inline-block;
}
.info-r p {
  display: inline-block;
}
.info-p {
  width: 100%;
}
.fix {
  width: 100%;
  height: 3rem;
  position: fixed;
  bottom: 0;
  display: flex;
}
.qidong {
  width: 50%;
  height: 3rem;
  background: #63758a;
  border: none;
  color: #fff;
}
.qued {
  width: 50%;
  height: 3rem;
  background: #4a82c6;
  border: none;
  color: #fff;
}
.hui {
  color: #606063;
}
.hei {
  color: #606063;
}
.lan {
  color: #1e82d2;
}
</style>
